<!DOCTYPE html>
<html>
    <head>
      <meta charset="utf-8">
      <title>综合管理</title>
      <link rel="stylesheet" href="../static/css/bootstrap.min.css">
      <link rel="stylesheet" href="../static/js/jquery.datetimepicker/jquery.datetimepicker.css">
      <link rel="stylesheet" href="../static/css/hover-min.css">
      <link rel="stylesheet" href="../static/css/style.css">
      <link rel="stylesheet" href="../static/css/content.css">
    </head>
    <body>
        <!--导航栏-->
        <nav class="navbar navbar-default">
            <div class="container-fluid">
              <div class="navbar-header">
                  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  </button>
                  <a class="navbar-brand" href="javascript:void(0);"><img src="../static/img/header.png"/></a>
              </div>
              <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                  <ul class="nav navbar-nav">
                      <li><a class="nav-location" href="../info/index.html">门户网站</a></li>
                      <li class="active"><a href="#">综合管理</a></li>
                      <li><a class="nav-location" href="../stumanage/index.html">学生专区</a></li>
                      <li><a class="nav-location" href="../teamanage/index.html">教师专区</a></li>
                      <li><a class="nav-location" href="../promanage/index.html">管理员专区</a></li>
                      <li><a class="nav-location" href="../dailyjob/index.html">日常办公</a></li>
                      <li><a class="nav-location" href="#">关于我们</a></li>
                  </ul>
              </div>
            </div>
        </nav>

        <!--左侧菜单栏-->
        <div id="menuLeft">
            <ul>
                <li class="active"><a href="#all-room"><span>实验室管理</span></a></li>
                <li><a href="#lab-equip"><span>设备仪器预约</span></a></li>
                <li><a href="#lab-db"><span>数据查询统计</span></a></li>
                <li><a href="#all-orderState"><span>预约状态</span></a></li>
                <li><a href="#all-team"><span>实验队伍管理</span></a></li>
            </ul>
        </div>

        <!--内容块-->
        <div class="content">
          <div id="all-room">
              <h3>实验室管理</h3>
              <div class="flex-box">
                <div class="card hvr-bounce-in" data-roomId="0001">
                    <div class="all-roomId">0001</div>
                    <div class="all-teacher">
                       sid
                    </div>
                    <div class="all-buttonGroup">
                        <button class="btn btn-primary all-comment-btn" data-toggle="modal" data-target="#all-comment-modal">评论</button>
                        <button class="btn btn-info" data-toggle="popover" title="机器人实验室" data-placement="top" data-content="非常美" class="all-info-btn">简介</button>
                        <button class="btn btn-success all-order-btn" data-toggle="modal" data-target="#all-order-modal">预约</button>
                    </div>
                </div>
                <div class="card hvr-bounce-in" data-roomId="0002">
                    <div class="all-roomId">0002</div>
                    <div class="all-teacher">
                       mingen
                    </div>
                    <div class="all-buttonGroup">
                        <button class="btn btn-primary all-comment-btn" data-toggle="modal" data-target="#all-comment-modal">评论</button>
                        <button class="btn btn-info" data-toggle="popover" title="东区实验室" data-placement="top" data-content="很差" class="all-info-btn">简介</button>
                        <button class="btn btn-success all-order-btn" data-toggle="modal" data-target="#all-order-modal">预约</button>
                    </div>
                </div>
              </div>
          </div>

          <div id="all-team" style="display: none;">
            <button id="get-test" class="btn btn-primary">GET</button>
            <button id="post-test" class="btn btn-success">POST</button>
          </div>
          <div id="all-orderState" style="display: none;">
              <h3>预约状态</h3>
              <div id="all-lab-orderState">
                <div class="all-lab-order order hvr-sweep-to-right">
                    <div class="allLabOrderId">0001</div>
                    <div class="allLabOrderDate">2016-5-21</div>
                    <div class="allLabOrderContent">机器人实验 第一周 周五 第1、2节</div>
                    <div class="allLabOrderState">状态：未决定</div>
                </div>
                <div class="all-lab-order order hvr-sweep-to-right">
                    <div class="allLabOrderId">0002</div>
                    <div class="allLabOrderDate">2016-5-21</div>
                    <div class="allLabOrderContent">足球实验 第二周 周四 第5、6节</div>
                    <div class="allLabOrderState">状态：拒绝</div>
                </div>
              </div>
              <div id="all-equip-orderState">
                <div class="all-equip-order order hvr-sweep-to-right">
                  <div class="allEquipOrderId">0003</div>
                  <div class="allEquipOrderDate">2016-5-21</div>
                  <div class="allEquipOrderContent">西瓜刀 10件 5天</div>
                  <div class="allEquipOrderState">状态：拒绝</div>
                </div>
                <div class="all-equip-order order hvr-sweep-to-right">
                  <div class="allEquipOrderId">0004</div>
                  <div class="allEquipOrderDate">2016-5-21</div>
                  <div class="allEquipOrderContent">狼牙棒 5件 10天</div>
                  <div class="allEquipOrderState">状态：允许</div>
                </div>
              </div>
          </div>
          <div id="lab-db" style="display: none">
              <h3>数据查询统计</h3>
              <div class="search-modal">
                  <div class="input-search">
                      <input class="form-control" id="input-search-form">
                      <label class="radio-inline">
                        <input type="radio" name="searchType" value="lab"> 实验
                      </label>
                      <label class="radio-inline">
                        <input type="radio" name="searchType" value="teacher"> 教师
                      </label>
                  </div>
                  <button type="button" class="btn btn-primary" id="search-btn">搜索</button>
              </div>
              <div>
                  <table class="table table-hover">
                      <thead>
                          <td>教师</td>
                          <td>实验</td>
                          <td>实验室</td>
                          <td>班级号</td>
                          <td>开始时间</td>
                          <td>结束时间</td>
                          <td>周几</td>
                          <td>第几节课</td>
                      </thead>
                      <tbody class="db-table"></tbody>
                  </table>
              </div>
          </div>
          <div id="lab-equip" style="display: none;">
              <h3>设备仪器预约</h3>
              <div class="flex-box">
                <div class="card hvr-bounce-in" data-assetName="西瓜刀">
                    <div class="lab-equipName">西瓜刀</div>
                    <div class="lab-buttonGroup">
                        <button class="btn btn-info" class="lab-equipInfo-btn" data-toggle="modal" data-target="#lab-equipInfo-modal">简介</button>
                        <button class="btn btn-success" data-toggle="modal" data-target="#lab-equipOrder-modal" class="lab-order-btn">预约</button>
                    </div>
                </div>
                <div class="card hvr-bounce-in" data-assetName="狼牙棒">
                    <div class="lab-equipName">狼牙棒</div>
                    <div class="lab-buttonGroup">
                        <button class="btn btn-info" class="lab-equipInfo-btn" data-toggle="modal" data-target="#lab-equipInfo-modal">简介</button>
                        <button class="btn btn-success" data-toggle="modal" data-target="#lab-equipOrder-modal" class="lab-order-btn">预约</button>
                    </div>
                </div>
              </div>
          </div>
        </div>

        <!-- 评论框 -->
        <div class="modal fade" id="all-comment-modal" tabindex="-1" role="dialog" aria-labelledby="all-comment-modal-label">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="all-comment-modal-label">东区实验室</h4>
              </div>
              <div class="modal-body">
                <div class="modal-showComment">
                    <p>Good</p>
                    <p>Not bad</p>
                </div>
              </div>
              <div class="modal-footer">
                <span>输入你的评论</span>
                <textarea class="form-control" rows="3"></textarea>
                <br>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="post-comment" data-dismiss="modal">发表</button>
              </div>
            </div>
          </div>
        </div>

        <!-- 实验室预约框 -->
        <div class="modal fade" id="all-order-modal" tabindex="-1" role="dialog" aria-labelledby="all-order-modal-label">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="all-order-modal-label">001</h4>
              </div>
              <div class="modal-header">
                  实验室预约情况
                  <div id="order-state" style="margin-top: 12px;">
                    <p>实验名称 申请人 第几周 周几 第几节课</p>
                    <p>实验名称 申请人 第几周 周几 第几节课</p>
                    <p>实验名称 申请人 第几周 周几 第几节课</p>
                  </div>
              </div>
              <div class="modal-body">
                  <input type="text" class="form-control" id="input-labName" placeholder="实验名称">
                  <select class="form-control" id="input-startWeek">
                      <option>起始周</option>
                      <option>第一周</option>
                      <option>第二周</option>
                      <option>第三周</option>
                      <option>第四周</option>
                      <option>第五周</option>
                      <option>第六周</option>
                      <option>第七周</option>
                      <option>第八周</option>
                      <option>第九周</option>
                      <option>第十周</option>
                      <option>第十一周</option>
                      <option>第十二周</option>
                      <option>第十三周</option>
                      <option>第十四周</option>
                      <option>第十五周</option>
                      <option>第十六周</option>
                      <option>第十七周</option>
                      <option>第十八周</option>
                  </select>
                  <select class="form-control" id="input-endWeek">
                      <option>结束周</option>
                      <option>第一周</option>
                      <option>第二周</option>
                      <option>第三周</option>
                      <option>第四周</option>
                      <option>第五周</option>
                      <option>第六周</option>
                      <option>第七周</option>
                      <option>第八周</option>
                      <option>第九周</option>
                      <option>第十周</option>
                      <option>第十一周</option>
                      <option>第十二周</option>
                      <option>第十三周</option>
                      <option>第十四周</option>
                      <option>第十五周</option>
                      <option>第十六周</option>
                      <option>第十七周</option>
                      <option>第十八周</option>
                  </select>
                  <select class="form-control" id="input-weekday">
                      <option>周几</option>
                      <option>周一</option>
                      <option>周二</option>
                      <option>周三</option>
                      <option>周四</option>
                      <option>周五</option>
                      <option>周六</option>
                      <option>周日</option>
                  </select>
                  <select class="form-control" id="input-course">
                      <option>第几节课</option>
                      <option>1、2节</option>
                      <option>3、4节</option>
                      <option>5、6节</option>
                      <option>7、8节</option>
                      <option>9、10节</option>
                      <option>11、12节</option>
                  </select>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="post-labOrder">预约</button>
              </div>
            </div>
          </div>
        </div>

        <!-- 简介框 -->
        <div class="modal fade" id="lab-equipInfo-modal" tabindex="-1" role="dialog" aria-labelledby="lab-equipInfo-modal-label">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="lab-equipInfo-modal-label">西瓜刀</h4>
              </div>
              <div class="modal-body">
                  <div class="lab-equipInfo-classNo">分类代码： 0001</div>
                  <div class="lab-equipInfo-className">分类名称：刀具</div>
                  <div class="lab-equipInfo-valueType">价值类型：昂贵</div>
                  <div class="lab-equipInfo-number">数量：10</div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
              </div>
            </div>
          </div>
        </div>

        <!-- 设备预约框 -->
        <div class="modal fade" id="lab-equipOrder-modal" tabindex="-1" role="dialog" aria-labelledby="lab-equipOrder-modal-label">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="lab-equipOrder-modal-label">西瓜刀</h4>
              </div>
              <div class="modal-body">
                  <input type="text" class="form-control" id="input-equipNumber" placeholder="申请数量">
                   <br>

                   申请天数：
                  <div>
                      <input id="input-startTime" type="text">
                      <span>~</span>
                      <input id="input-endTime" type="text">
                  </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="post-equipOrder">预约</button>
              </div>
            </div>
          </div>
        </div>

        <script src="../static/js/jquery.min.js"></script>
        <script src="../static/js/bootstrap.min.js"></script>
        <script src="../static/js/jquery.datetimepicker/jquery.datetimepicker.js"></script>
        <script src="../static/js/style.js"></script>
        <script src="../static/js/allmanage.js"></script>
        <script>
            // $('[data-toggle="popover"]').popover();
            $('#get-test').on('click', function(){
                $.ajax({
                    type: 'GET',
                    url: 'getTest_ajax',
                    data: {},
                    dataType: 'json',
                    success: function(retData){
                        alert('GET 请求成功 接受到的数据：' + retData);
                    },
                    error: function(){
                        alert('GET 请求失败');
                    }
                });
            });

            $('#post-test').on('click', function(){
                $.ajax({
                    type: 'POST',
                    url: 'postTest_ajax',
                    data: {test: 'test'},
                    dataType: 'json',
                    success: function(retData){
                        alert('POST 请求成功 接受到的数据：' + retData);
                    },
                    error: function(){
                        alert('POST 请求失败');
                    }
                });
            });

            $('#post-labOrder').on('click', function(){
                var data = "[{\"applicant\":\"T001\",\"course\":\"3,4节课\",\"labName\":\"软件测试\",\"week\":\"2015\",\"weekday\":\"\"},{\"applicant\":\"T001\",\"course\":\"全天\\r\",\"labName\":\"人机交互\",\"week\":\"2014-2-15\",\"weekday\":\"第六周\"}]";
                var retData = eval('(' + data + ')');
                $('#order-state').children().detach();
                var domArr = [];
                $.each(retData, function(i, e){
                    domArr.push('<p>' + e.labName + ' ' + e.applicant + ' ' + e.week + ' ' + e.weekday + ' ' + e.course + '</p>');
                });
                $('#order-state').append(domArr.join(''));
            });
        </script>
    </body>
</html>
